<template>
	<view>
		<view class="login_box">
			<view class="text_login">
				<!-- 表单区域 -->
				<view class="login_phone">
					<text>手机号</text>
					<input v-model="phone" type="text" maxlength="11" @blur="checkphone" />
				</view>
				<view class="login_code">
					<text>验证码</text>
					<input v-model="code" type="text" maxlength="4" @blur="checkcode" />
					<view @click="getCode" hover-class="touchOpacity">{{msg}}</view>
				</view>

				<!-- 登录按钮 -->
				<view class="login_but" hover-class="touchOpacity">
					<text space="ensp" @click="login">登 录</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		SendSMS,
		smsLogin
	} from '../../request/app.js'
	export default {
		data() {
			return {
				phone: '', //手机号
				code: '', //验证码
				sendCode: '', //获取的验证码
				msg: "获取验证码",
				num: 15,
				isshow: true //判断按钮状态
			}
		},
		methods: {
			//失去焦点判断 =>手机号
			checkphone() {
				let reg = /^1\d{10}$/
				if (!reg.test(this.phone)) {
					uni.showToast({
						title: '请输入正确的手机格式',
						icon: "none",
						duration: 3000
					})
					return false
				} else {
					return true
				}

			},
			//失去焦点判断 =>验证码
			checkcode() {
				//判断空
				//判断用户输入的验证和获取的验证码是否一致
				if (!this.code || this.code != this.sendCode) {
					uni.showToast({
						title: '请先获取验证码',
						icon: "none"
					})
					return
				}

			},
			//获取验证码
			async getCode() {
				if (!this.isshow) return
				let a = await this.checkphone()
				//a 就是检测手机号返回的结果
				if (a) {
					//判断存储
					if (uni.getStorageSync('code')) {
						console.log(1111);
						this.sendCode = uni.getStorageSync('code')
						this.isshow = false
						let timer = setInterval(() => {
							this.num--
							this.msg = `${this.num}s后，可以重新获取`
							if (this.num < 1) {
								clearInterval(timer)
								this.msg = '收获验证码'
								this.isshow = true
								this.num = 15
							}
						}, 1000)
					} else {
						console.log(2222);
						SendSMS({
								phone: this.phone
							})
							.then(res => {
								if (res.data.code == '200') {
									//把验证码结果存储到本地
									this.sendCode = res.data.list.code
									uni.setStorageSync('code', res.data.list.code)
									// console.log(res.data.list.code, 'res.data.list.code ');
									this.isshow = false
									let timer = setInterval(() => {
										this.num--
										this.msg = `${this.num}s后，可以重新获取`
										if (this.num < 1) {
											clearInterval(timer)
											this.msg = '收获验证码'
											this.isshow = true
											this.num = 15
										}
									}, 1000)
								}
							})
					}
				}

			},
			//登录
			login() {
				if (!this.phone || !this.code) {
					uni.showToast({
						title: '请输入手机号与验证码',
						icon: "none"
					})
					return
				}
				console.log(this.code, '用户输入', this.sendCode, '自动获取');
				if (this.code == this.sendCode) {
					//调用登录接口
					smsLogin({
							phone: this.phone
						})
						.then(res => {
							console.log(res, '手机号登录响应');
							//登录成功，被返回的res.data.list 存储，然后跳转首页
							if (res.data.code == 200)
								uni.setStorageSync('userinfo', res.data.list)
							//跳转到首页
							uni.switchTab({
								url: '/pages/mine/mine'
							})
						})
				} else {
					uni.showToast({
						title: '请输入正确验证码',
						icon: "none"
					})
				}

			}
		}
	}
</script>

<style>
	.login_box {
		height: 100%;
		background-color: #f2f2f2;
		overflow: hidden;
	}

	.text_login {
		padding-top: 40px;
		background-color: #FFFFFF;
		margin: 5px 5px 0;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.login_logo {
		width: 364rpx;
		height: 96rpx;
		margin: 488rpx 0 88rpx 0;
	}

	.login_phone {
		height: 60rpx;
		width: 610rpx;
		border-bottom: 1rpx solid #CCCCCC;
		display: flex;
		color: #666666;
		font-size: 24rpx;
	}

	input {
		flex: 1;
		margin-left: 15rpx;
	}

	.login_code {
		height: 60rpx;
		width: 610rpx;
		border-bottom: 1rpx solid #CCCCCC;
		display: flex;
		justify-content: space-between;
		color: #666666;
		font-size: 24rpx;
		margin-top: 34rpx;

	}

	.login_code view {
		/* width: 160rpx; */
		line-height: 48rpx;
		height: 48rpx;
		text-align: center;
		background-color: #009933;
		font-size: 20rpx;
		color: #FFFFFF;

	}

	.login_but {
		width: 610rpx;
		line-height: 49px;
		background-color: #6699CC;
		text-align: center;
		font-size: 32rpx;
		color: #FFFFFF;
		margin-top: 40rpx;
	}
</style>
